<template>
  <div class="chatPage">
    <!-- <van-row> -->
        <!-- <van-col span="24"> -->
            <div class="header">
              <van-divider />
              <div class="title">聊天室</div>
            </div>
        <!-- </van-col> -->
        <!-- <van-col span="24"> -->
          <!-- 会话框 -->
          <div class="chat" ref="chatScroll">
            <div>
              <div class="chat-common" v-for="(item,index) in chatList.slice(0,2)" :key="index" :class="{admin:item.source==1?true:false}">
                <div class="avater">
                  <img src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif" width="36" height="36" alt="">
                </div>
                <div class="chat-msg" :ref="'chat'+index">
                  {{item.content}}
                </div>
                <!-- <div class="chat-date">{{item.createTime}}</div> -->
              </div>
              <div class="chat-common" v-for="(item,index) in chatList.slice(2)" :key="index" :class="{admin:item.source==1?true:false}">
                <div class="avater2  avater">
                  {{item.nickName}}
                </div>
                <div class="chat-msg" :ref="'chat'+index">
                  {{item.content}}
                </div>
                <!-- <div class="chat-date">{{item.createTime}}</div> -->
              </div>
            </div>
          </div>
        <!-- </van-col> -->
    <!-- </van-row> -->
    <div class="sendMsg">
      <van-field v-model="sendMsg" placeholder="请输入需要发送的内容" />
      <van-button type="success" @click="send">发送</van-button>
    </div>
  </div>
</template>
<script>
import {ref,onMounted,onBeforeUnmount,nextTick} from 'vue'
import { Toast } from 'vant';
import RabbitMQ from '@/utils/RabbitMQ.js';
export default {
  name:'home',
  setup() {
    // 默认是空的，当页面加载完毕后，获取文本元素
    const chatScroll = ref(null);
    const sendMsg = ref('')
    const chatList = ref([{
      source:1,
      createTime:'2022-2-3',
      content:"这里可以聊天哦"
    },
    {
      source:0,
      createTime:'2022-2-3',
      content:"就很奈斯"
    }
    ])
    // websocket
    let wsUri =process.env.NODE_ENV === 'production'?"ws://101.43.171.167:3001":"ws://127.0.0.1:3001";
    // let wsUri ="ws://127.0.0.1:3001";
    let websocket = new WebSocket(wsUri);
    // 获取全局变量得到$axios
    // const {proxy} = getCurrentInstance()
    // 当前登录信息
    let userInfo = ref({})
    if(localStorage.getItem('userInfo')){
      userInfo.value = JSON.parse(localStorage.getItem('userInfo'))
      // console.log(userInfo.avatar);
    }
    const send=()=>{
      if(!sendMsg.value){
        Toast.fail('请输入消息');
        return
      }
      if(!userInfo.value.userId){
        Toast.fail('请先登录');
        return
      }
      let data = {
        msg:sendMsg.value,
        userId:userInfo.value.userId,
        nickName:userInfo.value.nickName,
      }
      websocket.send(JSON.stringify(data))
    }
    onMounted(()=>{
      let mq = new RabbitMQ();
      mq.sendQueueMsg('amqp://127.0.0.1:3002','12321',  (error) => {
        console.log(222);
          console.log(error)
      })
      //成功连接后
      websocket.onopen = function(evt) {
        console.log(evt,'success');
      };
      //连接失败
      websocket.onerror = function(evt) { 
        console.log(evt,'error');
      };
      //收到信息后
      websocket.onmessage = function(evt) { 
        console.log(evt,'message');
        let data = JSON.parse(evt.data)
        chatList.value.push({
          source:data.userId==userInfo.value.userId?1:0,
          createTime:'2022-2-3',
          content:data.msg,
          nickName:data.nickName
        })
        sendMsg.value = ''
        // 触底操作
        nextTick(()=>{
          chatScroll.value.scrollTop = chatScroll.value.scrollHeight;
        })
      };
      //后端关闭ws的时候
      websocket.onclose = function(evt) {
        console.log(evt,'close');
      };
    })
    onBeforeUnmount(()=>{
      websocket.close()
    })
    
    return{
      chatList,
      sendMsg,
      send,
      userInfo,
      chatScroll
    }
  }
}
</script>
<style lang="less" scoped>
.chatPage{
  position: relative;
  // height: calc(100vh - var(--van-tabbar-height) - var(--van-tabbar-height) - var(--van-tabbar-height));
  height: 100%;
  padding-top: 1px;
  box-sizing: border-box;
  .title {
      color: rgb(19, 152, 241);
      text-align: center;
  }
  .sendMsg{
    display: flex;
    position: absolute;
    bottom: 0px;
    width: 100%;
  }
  .chat{
    // height: calc(100vh - var(--van-tabbar-height) - 230px);
    position: absolute;
    top: 120px;
    bottom:  calc(var(--van-tabbar-height));
    left: 0px;
    right: 0px;
    overflow-y: auto;
    padding: 16px 16px 0px 16px;
    box-sizing: border-box;
    border-bottom: 1px solid #D8D8D8;
    .chat-common{
      display: flex;
      align-items: center;
      position: relative;
      margin-bottom: 10px;
      .chat-date{
        margin: 0px 11px;
      }
      .avater{
        margin-right: 10px;
      }
      .avater2{
        width: 70px;
        height: 70px;
        // border: 1px solid #fff;
        background: #fff;
        border-radius: 6px;
        text-align: center;
      }
    }
    .admin{
      flex-direction: row-reverse;
      position: relative;
      .avater{
        margin-right: 0px;
        margin-left: 10px;
      }
    }
  }
}

</style>